<!--  -->
<template>
  <div>
      <div class="header">
        <div class="header_left iconfont">&#xe667;</div>
        <div class="header_search">
          <i class="iconfont">&#xe63d;</i>
          <span>输入城市/景点/游玩主题</span>
        </div>
        <router-link to="/city">
        <div class="header_right">{{cityName}} <i class="iconfont">&#xe65b;</i> </div>
        </router-link>
      </div>
  </div>
</template>

<script>
import {mapState} from "vuex"

export default {
  computed:mapState(['cityName']),
  data () {
    return {

    }
  },
}

</script>
<style scoped >
a{
  text-decoration: none;
}
.header{
  width: 100%;
  height: 44px;
  background: #00bcd4; 
  display: flex;
  align-items: center;
  font-size: 18px;
}
.header_left{
  margin-left: 10px;
  color: #fff;
  padding-right: 10px;
  font-size: 20px;
}
.header_search{
  flex: 1; 
  color: #e4e7ea;
  background: #fff;
  border-radius: 3px;
  padding: 3px;
  padding-left: 10px;
  line-height: 19px;
}
.header_search span{
  font-size: 14px;
}
.header_right{
   font-size: 14px;
   color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
.header_right i{
  font-size: 16px;
 
}
</style>